﻿<template>
  <l-layout class="l-tab-page">
    <l-panel>
      <template #toolLeft>
        <l-query2
          :items="queryItems"
          :formData="queryData"
          :loading="tableLoading"
          @search="handleSearch"
        >
          <template #f_PurchaseNo>
            <el-input
              v-model="queryData.f_PurchaseNo"
              :placeholder="$t('请输入')"
            ></el-input>
          </template>
          <template #f_Theme>
            <el-input
              v-model="queryData.f_Theme"
              :placeholder="$t('请输入')"
            ></el-input>
          </template>
          <template #f_PurchaseType>
            <l-select
              :options="f_PurchaseTypeOptions"
              v-model="queryData.f_PurchaseType"
            ></l-select>
          </template>
          <template #f_ApplyDate>
            <l-date
              format="yyyy-MM-dd HH:mm:ss"
              dateType="datetimerange"
              v-model="queryData.f_ApplyDate"
              :placeholder="$t('请选择')"
            >
            </l-date>
          </template>
          <template #f_Appler>
            <l-user-select
              v-model="queryData.f_Appler"
            ></l-user-select>
          </template>
        </l-query2>
      </template>
      <template #toolRight>
        <l-tool-btns  @click="handleAdd()">
        </l-tool-btns>
      </template>
      <l-table
        ref="mainTable"
        :loading="tableLoading"
        :columns="lr_getPageColumns(columns)" 
        :dataSource="tableData"
        :isPage="true"
        :pageTotal="tableTotal"
        :tablePage.sync="tableCurrentPage"
        @loadPageData="turnTablePage"
      >
        <l-table-btns
          :btns="tableBtns"
          @click="lr_handleTableBtnClick"
        ></l-table-btns>
      </l-table>
    </l-panel>

    <!--表单-->
    <l-dialog
      :title="$t(formTitle)"
      :visible.sync="formVisible"
      :height="600"
      :width="1024"
      @ok="handleSave"
      @close="handleCloseForm"
      @opened="handleOpenedForm"
    >
      <my-form ref="form"></my-form>
    </l-dialog>
  </l-layout>
</template>

<script>
import MyForm from "./form"
const api = window.$api.erp.purchaseApply
export default {
    components: {
        MyForm,
    },
    data() {
        return {
            lr_isPage:true,

            // 查询参数
            queryData: {
                f_PurchaseNo: "",
                f_Theme: "",
                f_PurchaseType: "",
                f_ApplyDate: "",
                f_Appler: "",
            },
            queryItems: [
                { label: "单据编码", prop: "f_PurchaseNo" },
                { label: "主题", prop: "f_Theme" },
                { label: "采购类别", prop: "f_PurchaseType" },
                { label: "申请日期", prop: "f_ApplyDate", span: 24 },
                { label: "申请人", prop: "f_Appler" },
            ],

            // 表格参数
            tableLoading: false,
            tableData: [],
            tableTotal: 0,
            tableCurrentPage: 1,
            tablePageSize: 50,
            columns: [
                { label: "单据编码",prop: "f_PurchaseNo",minWidth: 120,align: "left"},
                { label: "申请日期",prop: "f_ApplyDate",width: 160,align: "left",dataType:'datetime'},
                { label: "主题", prop: "f_Theme", minWidth: 120, align: "left" },
                { label: "采购类别",prop: "f_PurchaseType",minWidth: 120,align: "left",dataType:'mydata',options:[ { value: "2", label: "新闻类" },{ value: "3", label: "产品类" },{ value: "4", label: "信息类" },]},
                { label: "申请人", prop: "f_Appler", minWidth: 120, align: "left",dataType:'user' },
                { label: "申请单位",prop: "f_Department",minWidth: 120,align: "left",dataType:'company'},
                { label: "备注", prop: "f_Description", minWidth: 120, align: "left" },
            ],
            tableBtns: [
                { prop: "Edit", label: "编辑" },
                { prop: "Delete", label: "删除" },
            ],

            // 表单参数
            formVisible: false,
            formTitle: "",
            formEditRow: null,
            formEdit: false,
        };
    },
    computed: {
        f_PurchaseTypeOptions() {
            return [
                { value: "2", label: "新闻类" },
                { value: "3", label: "产品类" },
                { value: "4", label: "信息类" },
            ];
        },
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            this.loadTableData()
        },
        handleSearch() {
            this.loadTableData()
        },
        turnTablePage({rows}) {
            this.tablePageSize = rows
            this.loadTableData(true)
        },
        async loadTableData(isNotFirst) {
            if(!isNotFirst) {
                this.tableCurrentPage = 1
            }
            this.tableLoading = true
            const queryData = this.$deepClone(this.queryData)
            if(!this.$validatenull(queryData.f_ApplyDate)) {
                queryData.f_ApplyDate_end = queryData.f_ApplyDate.split(" - ")[1]
                queryData.f_ApplyDate = queryData.f_ApplyDate.split(" - ")[0]
            }

            queryData.rows = this.tablePageSize
            queryData.page = this.tableCurrentPage
            queryData.sidx = "f_ApplyDate DESC"
            const data = await this.$awaitWraper(api.getPage(queryData))
            if (data != null) {
                this.tableData = data.rows
                this.tableTotal = data.records
            } else {
                this.tableData = []
            }
            this.tableLoading = false
        },

        handleAdd() {
            this.formEdit = false;
            this.handleShowForm("新增申请");
        },
        handleEdit($index, row) {
            this.formEdit = true;
            this.formEditRow = row;
            this.handleShowForm("编辑申请");
        },
        handleDelete($index, row) {
            this.$confirm(
                this.$t("此操作将永久删除该数据, 是否继续?"),
                this.$t("提示"),
                {
                    confirmButtonText: this.$t("确定"),
                    cancelButtonText: this.$t("取消"),
                    type: "warning",
                }
            )
            .then(async () => {
                this.tableData.splice($index, 1);
                this.tableTotal--;
                await api.remove(row.f_Id);
                this.$message({
                    type: "success",
                    message: this.$t("删除成功!"),
                });
            })
            .catch(() => {
                this.$message({
                    type: "info",
                    message: this.$t("已取消删除!"),
                })
            })
        },

        async handleSave(showLoading, hideLoading) {
            if (await this.$refs.form.validateForm()) {
                showLoading();
                const postData = this.$refs.form.getForm();
                let res = "";
                if (this.formEdit) {
                    // 编辑
                    res = await this.$awaitWraper(
                        api.update(this.formEditRow.f_Id, postData)
                    );
                } else {
                    // 新增
                    res = await this.$awaitWraper(
                        api.add(postData)
                    );  
                }
                if (res) {
                    this.$message({
                        type: "success",
                        message: this.$t("保存成功!"),
                    });
                    this.loadTableData();
                    this.formVisible = false;
                }

                hideLoading();
            }
        },

        handleShowForm(text) {
            this.formTitle = text;
            this.formVisible = true;
        },
        async handleOpenedForm(showLoading, hideLoading) {
            if (this.formEdit) {
                showLoading("加载数据中...");
                const data = await this.$awaitWraper(
                    api.get(this.formEditRow.f_Id)
                );
                if (data) {
                    this.$refs.form.setForm(data);
                }

                hideLoading();
            }
        },
        handleCloseForm() {
            this.$refs.form.resetForm();
        },
    },
};
</script>
